<template>
	<view>
		<!-- <uvsticky offset-top="0" v-if="tabs.length>0">
			<view class="topbox">
				<view class="bileibox" v-for="(item,index) in tabs" :key="index" @click="gotos(item)">
					<image :src="imgUrls+item.pro_pic" mode="scaleToFill" class="leimgs"></image>
					<text class="iltxt">{{item.pro_name}}</text>
				</view>
			</view>
		</uvsticky> -->
		<view class="centbox">
			<view class="comcss" v-for="item in dataList" :key="item.id" @click="goBusiness(item)">
				<image src="https://m.aqbwg.cn/sourse/xiaowan/dian.jpg" mode="scaleToFill" class="shopimg" v-if="item.pic_door==''||item.pic_door==null"></image>
				<image :src="imgUrl+item.pic_door" mode="scaleToFill" class="shopimg" v-else></image>
				<view class="xiancss">
					<view class="pnamcss">{{item.name}}</view>
					<view class="dinu">{{item.address}}</view>
					<view class="dicss">
						<uni-tag size="small" :text="`消费享 ${100 - item.discount}% 优惠`" type="orange" :circle="true"></uni-tag>
						<uni-icons type="location" size="12">{{item.juli}}km</uni-icons>
					</view>
				</view> 
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref , onMounted } from 'vue';
	import { onShow , onLoad , onReachBottom } from '@dcloudio/uni-app';
	import { apiMerlist , apiPbtype } from '@/api/upapi.js';
	import uvsticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky';
	
	const isNext = ref(false);
	const pages = ref(1);
	const latitude = ref('');
	const longitude = ref('');
	const idx = ref('');
	const dataList = ref([]);
	const imgUrl = ref('https://m.aqbwg.cn/sourse/merchant/');
	const imgUrls = ref('https://m.aqbwg.cn/sourse/xiaowan/product/');
	// const tabs = ref([]);
	
	const goBusiness=(e)=>{ uni.navigateTo({ url: '/pagesA/business/business?id='+e.id }) };
	// const gotos=(e)=>{ uni.navigateTo({ url: '/pagesA/business/product?id='+e.id+'&title='+e.pro_name }) };
	const gotos=(e)=>{ uni.navigateTo({ url: '/pagesA/business/buy?id='+e.id+'&title='+e.pro_name+'&propic='+e.pro_pic }) };
	const getLocadin = () => {
		uni.getLocation({
			type: 'gcj02',
			success(res) {
				latitude.value = res.latitude;
				longitude.value = res.longitude;
				getShop();
			},
			fail(error) {
				console.log('error===',error);
			}
		});
	};
	const getShop = async() => {
		try {
			let res = await apiMerlist({
				lng: longitude.value,
				lat: latitude.value,
				page: pages.value,
				clint: 'ali',
				pageSize: 10,
				type: idx.value
			});
			const data = res.data.object
			console.log('pppp===',data);
			if (pages.value == 1) {
				dataList.value = data
			} else {
				dataList.value = dataList.value.concat(data);
			}
			if (data.length >= 10) {
				pages.value = pages.value + 1;
			} else {
				isNext.value = true;
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const getPty = async() => {
		try {
			let res = await apiPbtype({
				mid: 133,
				id: idx.value
			});
			const data = res.data.object;
			tabs.value=data;
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	
	onLoad((option) => {
		uni.setNavigationBarTitle({ title: option.title });
		idx.value=option.id;
		getLocadin();
		// getPty();
	});
	onReachBottom(() => {
		if (!isNext.value) { getShop(); }
	});
</script>

<style lang="scss" scoped>
	.topbox{
		padding:10rpx 0rpx;
		background-color: #fff;
		border-radius: 0 0 30rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		.bileibox{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 16.6%;
			padding: 20rpx 0;
			.leimgs{
				width: 60rpx;
				height: 60rpx;
				// border-radius: 10rpx;
			}
			.iltxt{
				width: 100%;
				text-align: center;
				font-size: 20rpx;
				margin-top: 10rpx;
				color: #737373;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	.centbox{
		padding:30rpx;
		.comcss{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.shopimg{
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-right: 20rpx;
			}
			.xiancss{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				overflow: hidden;
				height: 200rpx;
				.pnamcss{
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
					font-weight: 600;
				}
				.dicss{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.dinu{
					font-size: 24rpx;
					color: #787878;
					display: -webkit-box; /* 使用弹性盒子布局 */
					-webkit-box-orient: vertical; /* 垂直排列 */
					-webkit-line-clamp: 2; /* 限制为两行 */
					overflow: hidden; /* 超出部分隐藏 */
					text-overflow: ellipsis; /* 超出部分显示省略号 */
				}
			}
		}
	}
</style>
